<template>
  <div class="order-management-container">
    <el-card>
      <div slot="header">
        <span>订单管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="fetchOrders">刷新</el-button>
      </div>
      
      <el-form :inline="true" class="search-form">
        <el-form-item label="订单编号">
          <el-input v-model="searchForm.orderNo" placeholder="输入订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.status" placeholder="选择状态" clearable>
            <el-option label="待支付" :value="0"></el-option>
            <el-option label="已支付待取件" :value="1"></el-option>
            <el-option label="已取件处理中" :value="2"></el-option>
            <el-option label="已完成" :value="3"></el-option>
            <el-option label="已取消" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      
      <el-table
        v-loading="loading"
        :data="orders"
        style="width: 100%">
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="120">
        </el-table-column>
        <el-table-column
          label="服务类型"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.serviceTypeName || '未知服务' }}
          </template>
        </el-table-column>
        <el-table-column
          label="衣物类型"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.clothesTypeName || '未知衣物' }}
          </template>
        </el-table-column>
        <el-table-column
          label="金额"
          width="100">
          <template slot-scope="scope">
            ¥{{ scope.row.totalAmount }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="viewOrderDetail(scope.row)">详情</el-button>
            <el-button
              v-if="scope.row.status === 1"
              size="mini"
              type="primary"
              @click="handleOrderPickup(scope.row)">确认取件</el-button>
            <el-button
              v-if="scope.row.status === 2"
              size="mini"
              type="success"
              @click="handleOrderComplete(scope.row)">完成订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="650px">
      <el-descriptions :column="2" border v-if="currentOrder">
        <el-descriptions-item label="订单编号">{{ currentOrder.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ currentOrder.username }}</el-descriptions-item>
        <el-descriptions-item label="服务类型">{{ currentOrder.serviceTypeName || '未知服务' }}</el-descriptions-item>
        <el-descriptions-item label="衣物类型">{{ currentOrder.clothesTypeName || '未知衣物' }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ currentOrder.quantity }}</el-descriptions-item>
        <el-descriptions-item label="金额">¥{{ currentOrder.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="取件地址">{{ currentOrder.pickupAddress }}</el-descriptions-item>
        <el-descriptions-item label="送件地址">{{ currentOrder.deliveryAddress }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ getStatusText(currentOrder.status) }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ getPaymentMethodText(currentOrder.paymentMethod) }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(currentOrder.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ currentOrder.paymentTime ? formatDate(currentOrder.paymentTime) : '未支付' }}</el-descriptions-item>
        <el-descriptions-item label="取件时间">{{ currentOrder.pickupTime ? formatDate(currentOrder.pickupTime) : '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="送件时间">{{ currentOrder.deliveryTime ? formatDate(currentOrder.deliveryTime) : '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ currentOrder.remark || '无' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { formatDate } from '@/utils/date'

export default {
  name: 'OrderManagement',
  data() {
    return {
      loading: false,
      orders: [],
      searchForm: {
        orderNo: '',
        status: ''
      },
      detailDialogVisible: false,
      currentOrder: null
    }
  },
  created() {
    this.fetchOrders()
  },
  methods: {
    formatDate,
    async fetchOrders() {
      this.loading = true
      try {
        let url = '/api/admin/order/list'
        const params = new URLSearchParams()
        
        // 添加搜索参数
        if (this.searchForm.orderNo) {
          params.append('orderNo', this.searchForm.orderNo)
        }
        if (this.searchForm.status !== '') {
          params.append('status', this.searchForm.status)
        }
        
        // 添加参数到URL
        if (params.toString()) {
          url += `?${params.toString()}`
        }
        
        const res = await axios.get(url).then(res => res.data)
        if (res.code === 200) {
          this.orders = res.data
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.error('获取订单列表失败', error)
        this.$message.error('获取订单列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.fetchOrders()
    },
    resetSearch() {
      this.searchForm = {
        orderNo: '',
        status: ''
      }
      this.fetchOrders()
    },
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付待取件',
        2: '已取件处理中',
        3: '已完成',
        4: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    getStatusType(status) {
      const typeMap = {
        0: 'warning',
        1: 'primary',
        2: 'primary',
        3: 'success',
        4: 'info'
      }
      return typeMap[status] || ''
    },
    getPaymentMethodText(method) {
      if (!method) return '未支付'
      const methodMap = {
        'alipay': '支付宝',
        'wechat': '微信支付',
        'cash': '现金支付'
      }
      return methodMap[method] || method
    },
    viewOrderDetail(row) {
      this.currentOrder = row
      this.detailDialogVisible = true
    },
    async handleOrderPickup(row) {
      this.$confirm('确认已取件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await axios.put(`/api/admin/order/updateStatus?orderNo=${row.orderNo}&status=2`).then(res => res.data)
          if (res.code === 200) {
            this.$message.success('操作成功')
            this.fetchOrders()
          } else {
            this.$message.error(res.message)
          }
        } catch (error) {
          this.$message.error('操作失败')
        }
      }).catch(() => {})
    },
    async handleOrderComplete(row) {
      this.$confirm('确认完成订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await axios.put(`/api/admin/order/updateStatus?orderNo=${row.orderNo}&status=3`).then(res => res.data)
          if (res.code === 200) {
            this.$message.success('操作成功')
            this.fetchOrders()
          } else {
            this.$message.error(res.message)
          }
        } catch (error) {
          this.$message.error('操作失败')
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.order-management-container {
  padding: 20px;
}
.search-form {
  margin-bottom: 20px;
}
</style> 